<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>js实现表单验证</title>
    <style type="text/css">
        * {
            margin: 0px;
            padding: 0px;
        }

        .normalBorder {
            border: 1px black solid;
            /*表单数据有效，边框线位黑色*/
        }

        .invalidBorder {
            border: 1px red solid;
            /*表单数据无效，边框线位红色*/
        }

        p {
            position: relative;
            /*相对定位*/
            margin-top: 20px;
        }

        p span {
            display: inline-block;
            /*inline-block:为了设置宽度*/
            width: 80px;
            text-align: right;
        }

        p input {
            position: absolute;
            /*p为相对定位，p>input为绝对定位 ，可以相对于p定位*/
            left: 100px;
            width: 200px;
            height: 20px;
        }

        p #tip_username,
        p #tip_pwd,
        p #tip_repwd,
        p #tip_email {
            position: absolute;
            /*由于p为相对定位，p中的子元素设置为绝对定位后，p中的子元素将相对于p进行定位。*/
            left: 310px;
            width: 120px;
            height: 20px;
            text-align: left;
        }
    </style>
    <script type="text/javascript">
        /*验证用户名*/
        function checkName(name) {
            var username = document.getElementById(name);
            /*输入不合法*/
            if (username.value == null || username.value == "" || username.value.length < 8) {
                document.getElementById(name).className = "invalidBorder";
                if (username.value == null || username.value == "") {
                    document.getElementById("tip_" + name).innerHTML = "不能为空";
                }
                else {
                    document.getElementById("tip_" + name).innerHTML = "不能少于8位";
                }
                return false;
            }
            /*输入合法*/
            else {
                document.getElementById(name).className = "normalBorder";
                document.getElementById(name).innerHTML = "";
                return true;
            }
        }
        /*验证密码*/
        function checkRe_pwd(pwd, repwd) {
            if (checkName(repwd) == false)
                return false;
            /*两次密码不一致*/
            if (document.getElementById(pwd).value != document.getElementById(repwd).value) {
                document.getElementById(repwd).className = "invalidBorder";
                document.getElementById("tip_" + repwd).innerHTML = "两次密码不一致";
                // alert(document.getElementById(pwd),document.getElementById(repwd));
                return false;
            }
            else {
                document.getElementById(repwd).className = "normalBorder";
                document.getElementById(repwd).innerHTML = "";
                return false;//因为还要继续验证
            }
        }
        /*验证邮箱*/
        function checkEmail(name) {
            var email = document.getElementById(name).value;
            var atpos = email.indexOf("@");//查找@位置
            var dotpos = email.lastIndexOf(".");//查找最后.com中“.”位置
            //邮箱不合法
            if (atpos < 1 || dotpos < atpos + 2 || dotpos + 2 >= email.length) {
                document.getElementById(name).className = "invalidBorder";
                document.getElementById("tip_" + name).innerHTML = "邮箱不合法";
                alert("邮箱不合法");
                return false;
            }
            else 
            {
                return true;
            }
        }
        function validateForm() {
            if (checkEmail("email") == true)
                if (checkName("username") && checkName("pwd") && checkRe_pwd("pwd", "repwd")) {
                    return true;
                }
                else {
                    return false;
                }
        }
    </script>
</head>

<body>
    <form name="myForm" action="../js_项目实例_01/js_滚动图片.html" onsubmit="return validateForm();
    /*指定单击提交按钮时调用的函数，函数返回true表单数据提交给服务器，否则不提交。*/" method="POST">
    <p>
        <span>Email:</span><input type="text" name="email" id="email">
        <!-- 错误提示框 -->
        <span style="color:red;" id="tip_email"></span>
    </p>
    <p>
        <span>用户名:</span><input type="text" name="username" id="username">
        <!-- 错误提示框 -->
        <span style="color:red;" id="tip_username"></span>
    </p>
    <p>
        <span>密码:</span><input type="password" name="pwd" id="pwd">
        <!-- 错误提示框 -->
        <span style="color:red;" id="tip_pwd"></span>
    </p>
    <p>
        <span>确认密码:</span><input type="password" name="repwd" id="repwd">
        <!-- 错误提示框 -->
        <span style="color:red;" id="tip_repwd"></span>
    </p>
    <p><input type="submit" value="提交" style="text-align:center;"></p>
    </form>
</body>

</html>